<template>
	<el-container v-loading="loading">
		<el-container>
			<!--			<el-header>-->
			<!--				<div class="left-panel">-->
			<!--					<div class="right-panel-search">-->
			<!--						<el-button @click="importOrder">批量下单-->
			<!--						</el-button>-->
			<!--						<el-button icon="el-icon-download" @click="downloadTpl">下载导入模板-->
			<!--						</el-button>-->
			<!--					</div>-->
			<!--				</div>-->
			<!--			</el-header>-->
			<el-header>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-select multiple v-model="search.company_id" placeholder="企业客户" style="min-width:25%;"
							clearable>
							<el-option v-for="item in companyList" :key="item.company_id" :label="item.company_name"
								:value="item.company_id">
							</el-option>
						</el-select>
						<el-input v-model="search.order_sn" placeholder="订单编号" clearable></el-input>
						<el-input v-model="search.mobile" placeholder="用户账号" clearable></el-input>
						<el-input v-model="search.username" placeholder="用户姓名" clearable></el-input>
						<el-input v-model="search.link_company_order_service_code" placeholder="关联激活码" clearable
							style="min-width:15%;"></el-input>
					</div>
				</div>
			</el-header>
			<el-header>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="search.product_name" placeholder="商品名称" style="min-width:25%;"
							clearable></el-input>
						<el-select v-model="search.provider_id" multiple placeholder="服务商" style="min-width:20%;"
							clearable>
							<el-option v-for="item in providerList" :key="item.provider_id" :label="item.provider_name"
								:value="item.provider_id">
							</el-option>
						</el-select>
						<el-date-picker style="min-width:50%;" v-model="dateTo" type="datetimerange" unlink-panels
							range-separator="至" start-placeholder="创建时间" end-placeholder="结束时间"
							format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" clearable="true" />
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						<el-button type="info" @click="resetsearch">重置</el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort
					remoteFilter>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column label="ID" prop="order_id" width="100"></el-table-column>
					<el-table-column label="订单编号" prop="order_sn" width="150"></el-table-column>
					<el-table-column label="用户账号" prop="mobile" width="150"></el-table-column>
					<el-table-column label="用户姓名" prop="username" width="150"></el-table-column>
					<el-table-column label="商品名称" prop="product_name" width="150"></el-table-column>
					<el-table-column label="服务卡名称" prop="card_name" width="150"></el-table-column>
					<el-table-column label="是否绿通服务" prop="is_green" width="100"
						:formatter="isGreenFormatter"></el-table-column>
					<el-table-column label="服务等待期（天）" prop="wait_day" width="100"></el-table-column>
					<el-table-column label="关联激活码" prop="link_company_order_service_code" width="150"></el-table-column>
					<el-table-column label="所属企业客户" prop="company_name" width="150"></el-table-column>
					<el-table-column label="服务开通状态" prop="service_status_name" width="150"></el-table-column>
					<el-table-column label="所属服务商" prop="provider_name" width="150"></el-table-column>
					<el-table-column label="服务有效期" prop="valid_time" width="140"></el-table-column>
					<!--					<el-table-column label="商品数量" prop="product_count_num" width="150"></el-table-column>-->
					<!--					<el-table-column label="实付金额" prop="paid_amount" width="150"></el-table-column>-->
					<el-table-column label="下单时间" prop="created_at" width="150"></el-table-column>
					<el-table-column label="操作" fixed="right" align="right" width="160">
						<template #default="scope">
							<el-button-group>
								<el-button text type="primary" size="small"
									@click="showData('show', scope.row, scope.$index)">查看
								</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess"
		@closed="dialog.save = false"></save-dialog>
</template>

<script>
import saveDialog from './save.vue'

export default {
	name: 'serviceProviderIndex',
	components: {
		saveDialog
	},
	data() {
		return {
			dialog: {
				save: false
			},
			showGroupLoading: false,
			loading: false,
			apiObj: this.$API['service_order.service_order'].index,
			selection: [],
			companyList: [],
			providerList: [],
			//时间搜索
			dateTo: [
				// this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00',
				// this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59',
			],
			search: {
				company_id: null,
				order_sn: null,
				link_company_order_service_code: null,
				mobile: null,
				username: null,
				product_name: null,
				provider_id: null,
				created_at_begin: null,
				created_at_end: null,
			}
		}
	},
	watch: {
		dateTo(val) {
			if (val) {
				this.search.created_at_begin = val[0];
				this.search.created_at_end = val[1];
			} else {
				this.search.created_at_begin = '';
				this.search.created_at_end = '';
			}
		},
	},
	mounted() {
		//获取单位列表
		this.getCompanyList()
		this.getProviderList()
	},
	methods: {
		isGreenFormatter(row) {
			if (row.is_green == 1) {
				return "是"
			} else {
				return "否"
			}
		},
		getCompanyList() {
			this.$API['company.company'].getCompanyList.get().then((res) => {
				if (res.code == 0) {
					this.companyList = res.data;
				}
			}).catch((msg) => {
				this.$alert(msg, "提示", { type: 'error' })
			})
		},
		getProviderList() {
			this.$API['service_provider.service_provider'].getProviderList.get().then((res) => {
				if (res.code == 0) {
					this.providerList = res.data;
				}
			}).catch((msg) => {
				this.$alert(msg, "提示", { type: 'error' })
			})
		},
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		//编辑
		handleData(mode, row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open(mode).setData(row)
			})
		},
		//查看
		showData(mode, row) {
			this.$router.push({
				path: '/service_order/detail',
				query: {
					order_sn: row.order_sn,
					action: 'view'
				}
			})
		},
		downloadTpl() {
			this.$API['common'].getImportTemplate.get({ file_type: 2 }).then((res) => {
				window.open(res.data.jump_url);
			}).catch((msg) => {
				this.$alert(msg, "提示", { type: 'error' })
			})
		},
		importOrder() {
			this.$router.push({
				path: '/service_order/import',
				query: {}
			})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//重置
		resetsearch() {
			this.dateTo = [];
			this.search = {
				company_id: null,
				order_sn: null,
				link_company_order_service_code: null,
				mobile: null,
				username: null,
				product_name: null,
				provider_id: null,
				created_at_begin: null,
				created_at_end: null,
			}
		},
		//本地更新数据
		handleSuccess() {
			this.dialog.save = false
			this.$refs.table.reload()
		},
	}
}
</script>

<style></style>
